<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>新增页面</title>
		<link rel="stylesheet" href="../../../component/pear/css/pear.css" />
	</head>
	<body>
		<form class="layui-form" action="" lay-filter="form-filter">
			<div class="mainBox">
				<div class="main-container">

					<div class="layui-form-item">
						<label class="layui-form-label">作业项目</label>
						<div class="layui-input-block">
							<input type="text" name="maintsItemName" lay-verify="required" autocomplete="off" placeholder="请输入作业项目"
								class="layui-input">
						</div>
					</div>
					
					<!-- 记录方法, 单选-->
					<div class="layui-form-item">
						<label class="layui-form-label">记录方法</label>
						<div class="layui-input-block">
							<input type="radio" name="maintsItemContentType" value="text" title="文本" lay-filter="itemtype-filter" checked>
							<input type="radio" name="maintsItemContentType" value="select" title="单选" lay-filter="itemtype-filter" >
							<input type="radio" name="maintsItemContentType" value="checkbox" title="多选" lay-filter="itemtype-filter" >

						</div>
					</div>

					<!-- 记录的内容 , 填充-->
					<div class="layui-form-item">
						<div id="itemContent">							
						</div>
					</div>
					<!-- qrtype -->
					<div class="layui-form-item">
						<div id="qrTypeOption">

						</div>
					</div>

					<!-- 是否多列 -->
					<div class="layui-form-item">
						<label class="layui-form-label">记录多列</label>
						<div class="layui-input-block">
							<select name="mutiColCount" lay-verify="required" lay-filter="mutiColCount-filter">
								<option value="1">单列</option>
								<option value="2">2列</option>
								<option value="3">3列</option>
								<option value="4">4列</option>
							</select>
						</div>
					</div>


					<div class="layui-form-item">
						<label class="layui-form-label">作业属于</label>
						<div class="layui-input-block">
							<input type="radio" name="belong2" value="belong2SecD" title="工程下所有设备" lay-filter="belong2-filter" checked>
							<input type="radio" name="belong2" value="belong2MacNo" title="设备号" lay-filter="belong2-filter" >
						</div>
					</div>
					
					<!-- 所属工程,填充 -->
					<div class="layui-form-item">
						<div id="belong2SecD">

						</div>
					</div>
					<!-- 所属设备,填充 -->
					<div class="layui-form-item" id="layui-form-item-belong2MacNo">
						<div id="belong2MacNo">

						</div>
					</div>

				</div>
			</div>
			<div class="bottom">
				<div class="button-container">
					<button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
						lay-filter="maintsItemAdd">
						<i class="layui-icon layui-icon-ok"></i>
						提交
					</button>
					<button type="reset" class="pear-btn pear-btn-sm">
						<i class="layui-icon layui-icon-refresh"></i>
						重置
					</button>
				</div>
			</div>
		</form>
		<script src="../../../component/layui/layui.js"></script>
		<script src="../../../component/pear/pear.js"></script>

		<script type="text/javascript">
			// 加载自定义模块,检查浏览器和token
			layui.extend({
        myheader: "{/}/lay-ext/myheader",
      });
			
			
			layui.use(['form', 'jquery','myheader','layer','laytpl'], function() {
				let form = layui.form;
				let $ = layui.jquery;
				let myheader = layui.myheader;
				let layer = layui.layer;
				let laytpl = layui.laytpl;

				var optionData={
					secdlist:[],
					macnolist:[]
				}

				// 定义全局 ajax的请求头
				myheader.ajaxGlobal(myheader.checkToken().tokenValue);

				// 初始化
				initPage("text","belong2SecD");

				// 注册记录方法的单选事件
				itemTypeEvent()

				// 注册作业属于的单选事件
				belong2Event()
				
				// 注册所属工程-下拉列表的选择事件
				belong2SecDSelectEvent()

				// form 确认上传
				form.on('submit(maintsItemAdd)', function(data) {

					$.ajax({
						url: parent.layui.myheader.baseUrl()+ '/maintsItem/addMaintsItem',
						// data: data.field,
						data:JSON.stringify({
    					maintsItemName:data.field.maintsItemName,
    					maintsItemContent:data.field.maintsItemContent,
					    maintsItemContentType:data.field.maintsItemContentType,
 							qrTypeID:data.field.qrType,
							mutiColCount:data.field.mutiColCount,
    					secDeptID:data.field.belong2SecD,
  						belong2MacNo:data.field.belong2MacNo
						}),
						contentType: 'application/json',		// 请求时的数据类型
						type: 'post',
						success: function(data) {
							if (data.data==1) {
								layer.msg("已添加", {
									time: 1000
								}, function() {
									parent.layer.close(parent.layer.getFrameIndex(window
										.name)); //关闭当前页
									parent.layui.table.reloadData('maintsItem-table',{
										scrollPos: 'fixed'  // 保持滚动条位置不变 - v2.7.3 新增
									});
								});
							} else {
								layer.msg("添加失败", {
									time: 1000
								});
							}
						}
					})
					return false;
				});
			
				$("[type='reset']").click(function(){
					location.reload()
					// initPage("text","belong2SecD");
				})

				function initPage(maintsItemContentType,belong2){
					//初始化赋值
					form.val("form-filter",{
						"maintsItemContentType":maintsItemContentType,
						"belong2": belong2
					})
					// 渲染作业内容
					getItemContentTpl(maintsItemContentType);
					// 渲染qrtype
					getQrTypeTpl(maintsItemContentType);
					// 获取全部工程List
					getAllSecD();
					$("#belong2MacNo").html('')

				}

				// 获取 记录内容 的 form 模板
				function getItemContentTpl(itemType){
					let tplhtml= itemContentTpl.innerHTML;
					laytpl(tplhtml).render(itemType,function(html){
						$('#itemContent').html(html)
						form.render();
					})
				}
				// 获取 QrType 的 form模板
				function getQrTypeTpl(maintsItemContentType){
					// 文本时
					if(maintsItemContentType==="text"){
						let tplhtml = qrTypeTpl.innerHTML;
						laytpl(tplhtml).render(getAllQrType(),function(html){
							$('#qrTypeOption').html(html)
							form.render()
						})
					}
					// 非文本时, 清空
					else {
						$('#qrTypeOption').html('')
					}
				}
				// 获取 QrType 的 list集合
				function getAllQrType(){
					let qrTypeList;
					$.ajax({
						async : false,
						url: parent.layui.myheader.baseUrl()+ '/qrType/getAllQrTypeName',
						type: 'get',
						success : function(res){
							if(res.data.length>0) {
								qrTypeList=[...res.data]
							}else {
								parent.layer.msg('未获取有效数据')
							}
						}
					})
					return qrTypeList;
				}
				// 获取 工程 的 form 模板
				function getAllSecD(){
					// 获取select 数据
					$.ajax(parent.layui.myheader.baseUrl()+"/secDept/getAllSecDeptName",{
						async:false, // 同步方法
						success: function(res){
							if(res.data.length>0){
								optionData.secdlist =[...res.data]
							} else {
								optionData.secdlist =[]
								parent.layer.msg('未获取有效数据')
							}
						}
					})
					
					// 填充layui模板
					let getTpl = optionTpl.innerHTML
					laytpl(getTpl).render(optionData.secdlist,function(html){
						$("#belong2SecD").html(html)
						// form重新渲染select
						form.render('select');
					})
				}

				function itemTypeEvent(){
					form.on('radio(itemtype-filter)',function(data){
						getItemContentTpl(data.value)
						getQrTypeTpl(data.value)
					})
				}

				function belong2Event(){
					// 单选切换事件
					form.on('radio(belong2-filter)',function(data){
						if(data.value =="belong2SecD"){
							$("#belong2MacNo").html('')
						} else if (data.value=="belong2MacNo"){
							laytpl(optionMacTpl.innerHTML).render({},function(html){
								$("#belong2MacNo").html(html)
								// form重新渲染select
								form.render('select');
							})
						}
						//return 
						//$("[name=belong2MacNo] option:selected").text("")
						// 清空 select machineNo 模板
						//clearMacSelectTpl()
						
						// 获取并渲染secd
						getAllSecD();
					})
				}

				function belong2SecDSelectEvent(){
					// 所属工程选择框, 选择事件
					form.on('select(belong2SecD-filter)',function(data){
						if((form.val('form-filter').belong2)==="belong2MacNo"){
							getAllMacNo(data.value);
						}
						return;

						// 单选选中 设备号时, ajax获取设备号list,并填充模板
						//if($("input[name='belong2']:checked").val()==="belong2MacNo"){
						//	getAllMacNo(data.value);
						//}
					})
				}

				// 获取和填充设备号 select 设备号
				function getAllMacNo(secDeptID){
					$.ajax(parent.layui.myheader.baseUrl()+"/machine/getMachineList4SecDept",{
						async:false,  //同步方法
						data: {
							secDeptID: secDeptID
						},
						success: function(res){
							if(res.data.length>0){
								optionData.macnolist =[...res.data]
							} else {
								optionData.macnolist=[]
								parent.layer.msg('未获取有效数据')
							}
						}
					})
					// 填充layui模板
					let getTpl = optionMacTpl.innerHTML
					laytpl(getTpl).render(optionData.macnolist,function(html){
						$("[name='belong2MacNo']").html(html)
						// form重新渲染select
						form.render('select');
					})
				}
				// 清空select 设备号模板
				function clearMacSelectTpl(){
					// 填充layui模板
					let getTpl = optionMacTpl.innerHTML
					laytpl(getTpl).render([],function(html){
						$("[name='belong2MacNo']").html(html)
						// form重新渲染select
						form.render('select');
					})
				}
			})
		</script>
		
		<script id="itemContentTpl" type="text/html">
			{{# if(d==="text"){ }}
				<label class="layui-form-label">作业题目</label>
				<div class="layui-input-block">
					<input type="text" name="maintsItemContent" lay-verify="required" autocomplete="off" placeholder="请输入作业内容"
						class="layui-input">
				</div>
			{{# } else { }}
				<label class="layui-form-label">选择清单</label>
				<div class="layui-form-mid layui-word-aux">不同选项使用分号(<span style="color:red;font-size:110%">;</span> )分隔</div>
				<div class="layui-input-block">
					<textarea name="maintsItemContent" placeholder="请输入选择清单" lay-verify="required" class="layui-textarea"></textarea>
				</div>
			{{# } }}
		</script>

		<script id="qrTypeTpl" type="text/html">
			<label class="layui-form-label">二维码类型</label>
			<div class="layui-input-block">
				<select name="qrType" lay-verify="required" lay-filter="qrType-filter">
					<option value=""></option>
					<option value="0">直接输入</option>
					{{# layui.each(d,function(index,item){  }}
					<option value="{{item.qrTypeID}}">{{item.qrTypeName}}</option>
					{{# }) }}
				</select>
			</div>
		</script>

		<script id="optionTpl" type="text/html">
			<label class="layui-form-label">所属工程</label>
			<div class="layui-input-block">
				<select name="belong2SecD" lay-verify="required" lay-filter="belong2SecD-filter">
					<option value=""></option>
					{{# layui.each(d,function(index,item){ }}
					<option value="{{item.secDeptID}}">{{item.secDeptName}} </option>
					{{# }); }}		
				</select>
			</div>
		</script>

		<script id="optionMacTpl" type="text/html">
			<label class="layui-form-label">所属设备</label>
			<div class="layui-input-block">
				<select name="belong2MacNo" lay-verify="required" lay-filter="belong2MacNo-filter">
					<option value=""></option>
					{{# layui.each(d,function(index,item){ }}
					<option value="{{item.machineNo}}">{{item.machineNo}} </option>
					{{# }); }}
				</select>
			</div>
			
		</script>

	</body>
</html>
